<template>
  <KView class="goods-detail">
    <KView class="goods-detail-content">
      <template v-if="isShow">
        <KView class="goods-detail-img">
          <goods-detail-image :pic-list="detail.pics" @to-back="toBack" @shop-cart="toShopCart"></goods-detail-image>
        </KView>
        <KView class="goods-info">
          <KView class="clearfix">
            <KView style="float:left" class="ellipsis goods-info-name">
              {{detail.name}}
            </KView>
            <KView style="float:right" class="goods-info-price">
              <span class="price-unit">¥</span>
              <span class="price-num">{{detail.price}}</span>
            </KView>
          </KView>
          <KView class="goods-info-count">
            <KView class="ellipsis"></KView>
            <KView>月售{{detail.monthCount}}份</KView>
          </KView>
        </KView>
        <KView class="goods-detail-line"></KView>

        <KView class="goods-detail-data">
          <KView class="goods-detail-history-div">
            <goods-history :history-list="historyList"></goods-history>
          </KView>
          <KView class="goods-detail-title">商品详情</KView>
          <KView class="goods-inner-line"></KView>
          <KView>
            <sys-rich-text :text="detail.description"></sys-rich-text>
          </KView>
          <KView class="goods-detail-title">商品须知</KView>
          <KView class="goods-inner-line"></KView>
          <KView>
            <sys-rich-text :text="detail.tip"></sys-rich-text>
          </KView>
        </KView>

        <KView class="goods-detail-eval">
          <KView class="goods-detail-title">商品评价</KView>
          <KView class="goods-inner-line"></KView>
          <goods-evaluate v-if="evaluateList.length>0" :evaluate-list="evaluateList" :pagination="evaluatePagination"
            :next-data-fun="setEvaluateList"></goods-evaluate>
          <KView v-else class="goods-detail-nodata">宝贝在等你评价哦~</KView>
        </KView>
      </template>
    </KView>
    <KView class="goods-detail-footer clearfix">
      <KFlex class="detail-footer-btn">
        <KFlexItem>
          <KView class="detail-footer-btn-item" @click="toShopMall">
            <KView class="footer-btn-img">
              <sys-svg name="shopMall" color="#59c264"></sys-svg>
            </KView>
            <KView class="footer-btn-text">店铺</KView>
          </KView>
        </KFlexItem>
        <KFlexItem>
          <KView class="detail-footer-btn-item" @click="toCusService">
            <KView class="footer-btn-img">
              <sys-svg name="customerService"></sys-svg>
            </KView>
            <KView class="footer-btn-text">客服</KView>
          </KView>
        </KFlexItem>
      </KFlex>
      <KView class="detail-footer-buy">
        <KView class="detail-footer-left" @click="addToCar">加入购物车</KView>
        <KView class="detail-footer-right" @click="buyGoods">立即购买</KView>
      </KView>
    </KView>

    <goods-model-dialog :visible.sync="openDialog" :goods="detail" :type="dialogType" @buy-success="buySuccess" @close="closeDialog">
    </goods-model-dialog>
  </KView>
</template>

<script>
  import SystemUtil from 'utils/systemUtil';
  import HistoryUtil from 'utils/historyUtil';

  import GoodsApi from 'services/goodsApi';
  import Pagination from 'models/pagination';

  import SysRichText from 'common/sysRichText';
  import SysSvg from 'common/sysSvg';
  import GoodsModelDialog from 'views/shopMall/shopGoods/goodsModelDialog';
  import GoodsDetailImage from './goodsDetailImage';
  import GoodsHistory from './goodsHistory';
  import GoodsEvaluate from './goodsEvaluate';

  export default {
    props: {
      hasBack: {
        type: Boolean,
        default: true
      }
    },

    data() {
      let id = this.$route.params.id;
      return {
        id,
        detail: null,
        historyList: [],
        isShow: false,
        isMiniprogram: process.env.isMiniprogram,
        evaluateList: [],
        evaluatePagination: new Pagination(),
        openDialog: false,
        dialogType: ''
      };
    },

    created() {
      if (SystemUtil.isEmpty(this.id)) {
        return;
      }

      SystemUtil.showLoading();
      window.Promise.all([
        this.setDetailData(),
        this.setEvaluateList(true),
        this.saveGoodsHistory()
      ]).then(() => {
        return this.setHistoryList().then(() => {
          SystemUtil.hideLoading();
          this.isShow = true;
        });
      }).catch(() => {
        SystemUtil.hideLoading();
      });
    },

    methods: {
      setDetailData() {
        return GoodsApi.getGoodsDetail(this.id).then(goodsDetail => {
          this.detail = goodsDetail;
          return goodsDetail;
        });
      },

      setEvaluateList(isInit) {
        return GoodsApi.getGoodsDetailEvaluate(this.id, this.evaluatePagination).then(evaluateList => {
          if (isInit) {
            this.evaluateList = evaluateList;
          } else {
            this.evaluateList.push(...evaluateList);
          }
          return evaluateList;
        });
      },

      saveGoodsHistory() {
        return GoodsApi.addGoodsDetailHistory(this.id).then(msg => {
          return msg;
        });
      },

      setHistoryList() {
        return GoodsApi.getGoodsDetailHistory(this.id).then(historyList => {
          this.historyList = historyList;
          return historyList;
        });
      },

      toBack() {
        if (!this.isMiniprogram) {
          window.history.back();
          return;
        }

        if (this.hasBack) {
          let url = HistoryUtil.getUrl();
          if (url === null) {
            wx.navigateBack();
          } else {
            HistoryUtil.delete();
            this.$emit('to-page', url);
          }
        } else {
          this.$emit('to-page', '/home')
        }
      },

      toShopCart() {
        if (this.isMiniprogram) {
          let pages = getCurrentPages();
          let page = pages[0];
          page.window.actionData = {
            type: 'toPage',
            data: {
              url: '/shoppingCart'
            }
          };
          let num = pages.length - 1;
          wx.navigateBack({
            delta: num
          });
        }
      },

      toShopMall() {
        let detail = this.detail;
        let shopData = detail.getShopData();
        if (this.isMiniprogram) {
          HistoryUtil.add(HistoryUtil.getCurrentUrl());
          let data = SystemUtil.formatFormParam(shopData);
          this.$emit('to-page', `/shopMall?${data}`);
        } else {
          this.$router.push({
            path: '/shopMall',
            query: shopData
          });
        }
      },

      toCusService() {

      },

      addToCar() {
        this.dialogType = 'shopCar';
        this.openDialog = true;
      },

      buyGoods() {
        this.dialogType = 'buyNow';
        this.openDialog = true;
      },

      buySuccess(data, orderId) {
        if (this.dialogType === 'buyNow') {
          let url = `/paymentGoods/${orderId}?type=goodsDetail`;
          if (this.isMiniprogram) {
            window.open(url);
          }
        }
      },

      closeDialog() {
        this.dialogType = '';
      },

      toShopCartPage({
        url
      }) {
        HistoryUtil.add(HistoryUtil.getCurrentUrl());
        this.$emit('to-page', url);
      }
    },

    components: {
      GoodsDetailImage,
      SysRichText,
      SysSvg,
      GoodsHistory,
      GoodsEvaluate,
      GoodsModelDialog
    }
  };

</script>

<style lang="scss">
  .goods-detail {
    height: 100%;

    .goods-detail-content {
      height: calc(100% - #{formatPx(110)});
      overflow: auto;

      .goods-detail-img {
        height: formatPx(500);
      }

      .goods-info {
        margin-top: formatPx(40);
        padding: 0 formatPx(30);
        margin-bottom: formatPx(40);

        .goods-info-name {
          font-size: formatPx(36);
          color: #2f3135;
          max-width: formatPx(560);
        }

        .goods-info-price {
          color: #ff641f;

          .price-unit {
            font-size: formatPx(32);
          }

          .price-num {
            font-size: formatPx(40);
          }
        }

        .goods-info-count {
          color: #b3b9c2;
          font-size: formatPx(26);

          >div {
            margin-bottom: formatPx(8);

            &:last-child {
              margin-bottom: 0;
            }
          }
        }
      }

      .goods-detail-line {
        height: formatPx(18);
        background: #DADADA;
      }
    }

    .goods-detail-title {
      border-left: formatPx(10) solid #59C264;
      font-size: formatPx(36);
      padding-left: formatPx(15);
      line-height: formatPx(40);
      height: formatPx(40);
    }

    .goods-inner-line {
      height: 1px;
      background: #DADADA;
      margin: formatPx(30) 0;
    }

    .goods-detail-data {
      margin-top: formatPx(50);
      padding: 0 formatPx(30);

      .goods-detail-title {
        margin-top: formatPx(30);
      }
    }

    .goods-detail-eval {
      margin-top: formatPx(55);
      padding: 0 formatPx(30);

      .goods-detail-nodata {
        margin-top: formatPx(30);
        height: formatPx(100);
        line-height: formatPx(100);
        text-align: center;
        font-size: formatPx(30);
        color: #999999;
        background: #EFEFEF;
        margin-left: formatPx(-30);
        margin-right: formatPx(-30);
      }
    }

    .goods-detail-footer {
      height: formatPx(80);
      padding: formatPx(15) formatPx(30);

      >div {
        height: 100%;
      }

      .detail-footer-btn {
        float: left;
        width: formatPx(200);
        height: 100%;

        .detail-footer-btn-item {
          margin: auto;
          height: 100%;
          width: formatPx(65);

          .footer-btn-img {
            height: formatPx(36);
            margin-bottom: formatPx(10);
          }

          .footer-btn-text {
            font-size: formatPx(26);
            text-align: center;
          }
        }
      }

      .detail-footer-buy {
        float: right;
        width: formatPx(414);

        >div {
          float: left;
          width: 50%;
          height: 100%;
          line-height: formatPx(80);
          color: #ffffff;
          font-size: formatPx(28);
          text-align: center;
        }

        .detail-footer-left {
          background: #f39800;
          border-top-left-radius: formatPx(40);
          border-bottom-left-radius: formatPx(40);
        }

        .detail-footer-right {
          background: #59c264;
          border-top-right-radius: formatPx(40);
          border-bottom-right-radius: formatPx(40);
        }
      }
    }
  }

</style>
